<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Blog Template">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="../../static/assets/images/favicon.ico">

    <!-- FontAwesome JS-->
    <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"></script>

    <!-- Theme CSS -->
    <link id="theme-style" rel="stylesheet" th:href="@{/assets/css/theme-1.css}">
	<!-- Javascript -->
	<script th:src="@{/assets/plugins/jquery-3.3.1.min.js}"></script>
	<script th:src="@{/assets/plugins/popper.min.js}"></script>
	<script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>

	<!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
	<script th:src="@{/assets/js/demo/style-switcher.js}"></script>

</head>
<body>
    <header th:replace="~{blog/common.html::sidebar}"></header>
    <div class="main-wrapper">
		<section class="cta-section theme-bg-light py-5">
			<div class="container text-center">
				<h2 class="heading">DevBlog - A Blog Made For Myself</h2>
				<div class="intro">Welcome to my blog. Subscribe and get my latest blog post in your inbox.</div>
				<form class="signup-form form-inline justify-content-center pt-3">
					<div class="form-group">
						<label class="sr-only" for="semail">Your email</label>
						<input type="email" id="semail" name="semail1" class="form-control mr-md-1 semail" placeholder="Enter email">
					</div>
					<button type="submit" class="btn btn-primary">Subscribe</button>
				</form>
			</div><!--//container-->
		</section>
	    <section class="blog-list px-3 py-5 p-md-5">
		    <div class="container">
			    <div class="item mb-5" th:each="article:${articles.list}">
				    <div class="media">
					    <img class="mr-3 img-fluid post-thumb d-none d-md-flex" th:src="@{/assets/images/blog/blog-post-thumb-7.jpg}" alt="image">
					    <div class="media-body">
							<h3 class="title mb-1"><a th:href="@{/article/toPost(id=${article.getId()})}" th:text="${article.getTitle()}"></a></h3>
							<div class="meta mb-1">
								<span class="date" th:text="'Published '+${article.getPublishTime()}"></span>
								<span class="time" th:text="${article.getReadCount()+' read'}"></span>
								<span class="comment">
								<a href="#" th:text="${article.getCommentCount()}+' comments'"></a>
								</span>
							</div>
							<div class="intro" th:text="${article.getIntroduction()}"></div>
							<a class="more-link" th:href="@{/article/toPost(id=${article.getId()})}">Read more &rarr;</a>
					    </div><!--//media-body-->
				    </div><!--//media-->
			    </div><!--//item-->
<!--			    <nav class="blog-nav nav nav-justified my-5">-->
<!--				  <a class="nav-link-prev nav-item nav-link rounded-left" href="index.html">Previous<i class="arrow-prev fas fa-long-arrow-alt-left"></i></a>-->
<!--				  <a class="nav-link-next nav-item nav-link rounded-right" href="blog-list.html">Next<i class="arrow-next fas fa-long-arrow-alt-right"></i></a>-->
<!--				</nav>-->
				<div th:replace="comm/macros :: pageAdminNav(${articles})"></div>
		    </div>
	    </section>
		<footer th:replace="~{blog/common.html::footer}" class="fixed-bottom"></footer>
    </div><!--//main-wrapper-->

	<!-- *****CONFIGURE STYLE (REMOVE ON YOUR PRODUCTION SITE)****** -->
	<div th:replace="~{blog/common.html::diyTheme}"></div><!--//configure-panel-->
</body>
</html>

